<template>
    <el-container class="user-container">
        <Menu :cIsCollapse="fIsCollapse"></Menu>
        <el-container>
            <el-header>
                <div class="my-header" :style="isHomeStyle">
                    <el-tooltip effect="dark" content="折叠侧边栏">
                        <el-button @click="collapse" text circle :icon="More"></el-button>
                    </el-tooltip>
                    <div class="header-main" :style="headerMainCSS" v-if="router.currentRoute.value.path != '/'">
                        <!-- 机器人及会话名称 -->
                        <div v-if="router.currentRoute.value.path.includes('/session')">
                            <SessionIntro />
                        </div>
                        <!-- 新建聊天按钮 -->
                        <div v-if="router.currentRoute.value.path.includes('/session')">
                            <el-button text type="primary" :icon="Edit"
                                @click="router.push({ path: '/' })">新建聊天</el-button>
                        </div>
                        <!-- 所有会话标题 -->
                        <div v-if="router.currentRoute.value.path == '/allsessions'">
                            <p>所有会话</p>
                        </div>
                        <!-- 设置标题 -->
                        <div v-if="router.currentRoute.value.path == '/setting'">
                            <p>设置</p>
                        </div>
                    </div>

                </div>
            </el-header>
            <!-- display居中布局的main -->
            <el-main class="normal-main" :style="mainStyle">
                <HomeView v-if="router.currentRoute.value.path == '/'"></HomeView>
                <RouterView></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { computed, reactive, ref, onMounted } from "vue"
import Menu from "@/components/menu"
import HomeView from "./home/index.vue";
import More from "@/components/icons/More.vue"
import { useRouter } from "vue-router";
import SessionIntro from "@/components/session/SessionIntro.vue";
import { Edit } from "@element-plus/icons-vue"
// import { getLimitSessions } from "@/api/session";
// import { useAuthStore } from "@/stores/auth";

const fIsCollapse = ref(false);
const router = useRouter()
// console.log(router.currentRoute)

//设置首页头部颜色变化
const isHomeStyle = computed(() => ({
    'backgroundColor': router.currentRoute.value.path == '/' ? '' : '#f4f4f4',
}))
//设置头部元素对称变化
const headerMainCSS = computed(() => ({
    'justify-content': router.currentRoute.value.path.includes('/session') ? 'space-between' : 'center',
}))
//设置main元素居中方式，所有会话页面和设置页面只有水平居中
const mainStyle = computed(() => ({
    'align-items': (router.currentRoute.value.path == '/allsessions' || router.currentRoute.value.path == '/setting') ? '' : 'center'
}))

//控制菜单栏收缩
const collapse = () => {
    fIsCollapse.value = !fIsCollapse.value
}


</script>

<style lang="scss" scoped>
$bgcolor: #f4f4f4;

.user-container {
    height: 100vh;

    .el-header {
        height: 50px;
        padding: 0;

        .my-header {
            padding: 0 1rem;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;

            .header-main {
                flex: 1 1 auto;
                display: flex;
                align-items: center;
            }
        }
    }

    .normal-main {
        padding: 0 1rem;
        display: flex;
        justify-content: center;
        // background-image: url("../../../public/background-image.jpg");
        // background-size: 60%;
        // background-position: top;
        // background-repeat: no-repeat;
    }
}

p {
    font-weight: bold;
}
</style>
